<template>
  <div>
    <el-dialog title="添加商品分类" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="上级分类" :label-width="formLabelWidth">
          <el-select v-model="form.pid" placeholder="请选择上级分类">
            <el-option :value="0">顶级分类</el-option>
            <el-option label="手机通讯" value="2"></el-option>
            <el-option label="电脑办公" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="form.catename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <!-- 文件上传：原生写法 -->
          <!-- <div class="upfile">
            <h3>+</h3>
            <img v-show="imgPath !=''" :src="imgPath" />
            <input @change="uploadimg" type="file" name='img'>
          </div> -->
          <!-- Element UI:文件上传 
              auto-upload:是否在选取文件后立即进行上传
              action:文件上传的地址
              on-change:文件状态改变时的钩子
          -->
          <el-upload
            class="avatar-uploader"
            action="#"
            :auto-upload=false 
            :show-file-list="false"
            :on-change="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            :active-value="1"
            :inactive-value="2"
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addcategory"
          >添加</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { successMsg, faileMsg } from "../../../tools/tools.js";
import { addOneGoodsCate } from "../../../request/api.js";

export default {
  methods: {
    //添加商品分类
    addcategory(){
        let curfile = false;
        if(this.form.img != ''){ //用户选择了要上传的文件：
            curfile = true;
        }

        addOneGoodsCate(this.form,curfile).then(d=>{
             console.log(d,'d9999');
        }).catch(e=>{
            console.log(e,'e777');
        });
    },
    //文件状态改变时的钩子：
    beforeAvatarUpload(fObj){
         console.log(fObj,'Yes OK');

        //定义允许上传的文件类型：
        let imgtypeArr = ["image/png", "image/gif", "image/jpg", "image/jpeg"];         
         //获取用户要上传的文件类型：
         let filetype = fObj.raw.type;
         if(imgtypeArr.indexOf(filetype) == -1){
          //要上传的文件类型不正确
          faileMsg(
            "选择的要上传的文件类型不正确，只能上传.png、.gif、.jpg、.jpeg格式的图片！"
          );          
          return;
         }

         //获取用户要上传的文件大小：
         let filesize = fObj.raw.size;
         if(filesize > 2*1024*1024){
          faileMsg("要上传的文件大小不能超过2M!");
          return;
         }

         //预览图片：
         this.imageUrl = URL.createObjectURL(fObj.raw);
         //将要上传的图片信息赋值给this.form
         this.form.img = fObj.raw;

    },
    uploadimg(e) {
      //获取用户选择的要上传文件信息:
      //    console.log(e,'eee...');
      console.log(e.target.files[0], "e.target.files[0]");

      //定义允许上传的文件类型：
      let imgtypeArr = ["image/png", "image/gif", "image/jpg", "image/jpeg"];
      //获取用户选择的要上传的文件类型：
      let filetype = e.target.files[0].type;
      if (imgtypeArr.indexOf(filetype) == -1) {
        //要上传的文件类型不正确
        faileMsg(
          "选择的要上传的文件类型不正确，只能上传.png、.gif、.jpg、.jpeg格式的图片！"
        );
        return;
      }

      //要上传的文件大小不能超过2M
      //获取用户选择的要上传的文件大小：
      let filesize = e.target.files[0].size;
      if (filesize > 2 * 1024 * 1024) {
        faileMsg("要上传的文件大小不能超过2M!");
        return;
      }

      //URL.createObjectURL:会根据传入的参数创建一个指向该参数对象的URL
      this.imgPath = URL.createObjectURL(e.target.files[0]);
    },

    //开始调用服务端添加商品分类接口：
  },
  data() {
    return {
      form: {
        pid: 0, //上级分类id
        catename: "", //分类名称
        img:'',//要上传的文件信息
        status: 1, //状态 1正常2禁用
      },
      imageUrl:'',//要上传的图片路径
      imgPath: "", //要上传的图片路径
      formLabelWidth: "120px",
      dialogFormVisible: true,
    };
  },
};
</script>

<style scoped>
  .avatar-uploader /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

.upfile {
  width: 150px;
  height: 150px;
  border: 1px dotted grey;
  background-color: #fbfdff;
}

.upfile img {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 0;
  top: 0;
}

.upfile h3 {
  width: 150px;
  height: 150px;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  line-height: 150px;
}

.upfile input {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
</style>